<template>
	<view class="list-record">
		<mp-html
			:content="recordConfig.recordInfo"
			:selectable="true"/>
		<view class="record-data">
			<text>今</text>
			<text class="digit">{{today}}</text>
			<text>条，昨</text>
			<text class="digit">{{yesterday}}</text>
			<text>条，共</text>
			<text class="digit">{{all}}</text>
			<text>条</text>
		</view>
		<view class="list-tag">
			<view
				@click="$_To(`editor/editorRecord?gid=${listGid}&hid=${item.tag}&defaultContent=${item.defaultContent}`,'Token')"
				v-for="item in recordConfig.tags"
				:style="item.css">
				{{item.tag}}
			</view>
			<view
				style="border: 1rpx solid #EBEEF5;margin: 25rpx 0 0 25rpx;padding: 20rpx 25rpx;font-size: 32rpx;line-height: 32rpx;border-radius: 100rpx;"
				@click="$_To('post/post?pid='+recordConfig.tagAskFor)">没有？申请标签</view>
		</view>
		<view class="list" v-if="listState == 'success'">
			<view
				@click="$_To('post/post?pid='+item.pid)"
				class="for"
				v-for="item in list">
				<view class="_left">
					<view class="_tag" v-if="item.hashtags.length">
						<text>{{item.hashtags[0].hname}}</text>
					</view>
					<view class="avatar" @click.stop="$_To('user/user?uid='+item.author.uid)">
						<view class="image">
							<image :src="item.author.avatar" mode="widthFix"></image>
						</view>
						<view class="nickname">
							<text>{{item.author.nickname}}</text>
						</view>
					</view>
					<view class="time">
						<text>{{item.createdTimeAgo}}</text>
					</view>
				</view>
				<view class="_right">
					<view class="content">
						{{$_filterHtml(item.content)}}
					</view>
					<view class="files-image" v-if="item.files.images.length">
						<view
							@click.stop="$_picturePreview(index,item.files.images)"
							v-for="(image,index) in item.files.images">
							<image :src="image.imageSquareUrl" mode="widthFix"></image>
						</view>
					</view>
					<view class="files-video" v-if="item.files.videos.length">
						<view
							@click.stop="$_To('public/video?url='+video.videoUrl)"
							v-for="video in item.files.videos">
							<text class="iconfont icon-play"></text>
						</view>
					</view>
					<view class="files-audio" v-if="item.files.audios.length">
						<template v-for="audio in item.files.audios">
							<public-audio
								Css="width:calc(100% - 6rpx);border-bottom: 2rpx solid #FFF;"
								:Url="audio.audioUrl"
								></public-audio>
						</template>
					</view>
					<view
						@click.stop="clickMap(item.location.latitude,item.location.longitude)"
						class="address"
						v-if="item.location.poi">
						<text class="iconfont icon-map-filling"></text>
						<text class="text">{{item.location.poi}}</text>
					</view>
				</view>
			</view>
			<view
				@click="getList('more')"
				class="more">点击加载更多</view>
		</view>
		<template v-if="listState == 'loading'">
			<public-loading></public-loading>
		</template>
		<template v-if="listState == 'empty'">
			<public-empty></public-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"list-record",
		props:{
			listGid:{
				type:String,
				default:""
			},
			recordConfig:{
				type:Object,
				default:""
			}
		},
		data() {
			return {
				today:"",
				yesterday:"",
				all:"",
				list:[],
				listPage:2,
				listState:"loading"
			};
		},
		mounted(){
			this.getRecordDataToday();
		},
		methods:{
			// 获取今日打卡数量
			getRecordDataToday(){
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"gid":this.listGid,
						"createdDate":"today",
						"whitelistKeys":"paginate"
					},
					(res) => {
						this.today = res.data.data.paginate.total;
						this.getRecordDataYesterday();
					}
				)
			},
			// 获取昨日打卡数量
			getRecordDataYesterday(){
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"gid":this.listGid,
						"createdDate":"yesterday",
						"whitelistKeys":"paginate"
					},
					(res) => {
						this.yesterday = res.data.data.paginate.total;
						this.getRecordDataAll();
					}
				)
			},
			// 获取全部打卡数量
			getRecordDataAll(){
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"gid":this.listGid,
						"whitelistKeys":"paginate"
					},
					(res) => {
						this.all = res.data.data.paginate.total;
						this.getList();
					}
				)
			},
			// 获取打卡列表
			getList(more){
				if(more == 'more'){uni.showLoading({ title: "加载中" });}
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"gid":this.listGid,
						"page":more == 'more' ? this.listPage : "",
						"whitelistKeys":"pid,hashtags,author.uid,author.avatar,author.nickname,createdTimeAgo,content,files,location"
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.list = this.list.concat(res.data.data.list);
								this.listPage++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.list.length){
								this.list = res.data.data.list;
								this.listState = "success"
							}else{
								this.listState = "empty"
							}
						}
					}
				)
			},
			// 打开位置、地图按钮
			clickMap(latitude,longitude){
				uni.openLocation({
					latitude:parseFloat(latitude),
					longitude: parseFloat(longitude),
					success: (res) => {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.list-record{
	.list-tag{
		display: flex;
		flex-wrap: wrap;
	}
	.record-data{
		background: $BeiJingSe;
		border-bottom: 1rpx solid $BianKuangSe;
		padding: 20rpx 25rpx;
		text-align: center;
		.digit{
			color: $HongSe;
			padding: 0 5rpx;
		}
	}
	.list{
		border-top: 25rpx solid $BeiJingSe;
		padding: 0 25rpx 25rpx 25rpx;
		margin-top: 25rpx;
		.for{
			display: flex;
			padding: 25rpx 0;
			border-bottom: 1rpx solid $BianKuangSe;
			._left{
				flex-shrink: 0;
				display: flex;
				._tag{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80rpx;
					text{
						background: $BeiJingSe;
						border: 1rpx solid $BianKuangSe;
						font-size: 22rpx;
						line-height: 22rpx;
						border-radius: 100rpx;
						padding: 10rpx 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				.avatar{
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;
					margin: 0 15rpx;
					position: relative;
					.image{
						width: 80rpx;
						height: 80rpx;
						overflow: hidden;
						border-radius: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}
					.nickname{
						position: absolute;
						bottom: 0;
						left: 0;
						z-index: 2;
						width: 80rpx;
						height: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color:rgba(0,0,0,0.5);
						text{
							color: #FFF;
							font-size: 18rpx;
							line-height: 18rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
				.time{
					height: 80rpx;
					font-size: 28rpx;
					line-height: 28rpx;
					margin-right: 15rpx;
					display: flex;
					align-items: center;
					color: $ZhanWeiSe;
				}
			}
			._right{
				flex: 1;
				display: flex;
				flex-flow: column;
				.content{
					font-size: 28rpx;
					line-height: 35rpx;
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
				.files-image{
					display: flex;
					flex-wrap: wrap;
					margin-top: 15rpx;
					view{
						width:calc(33% - 4rpx);
						height: 80rpx;
						overflow: hidden;
						border-right: 2rpx solid #FFF;
						border-bottom: 2rpx solid #FFF;
						background: $BeiJingSe;
					}
				}
				.files-video{
					display: flex;
					flex-wrap: wrap;
					margin-top: 15rpx;
					view{
						width:calc(33% - 4rpx);
						height: 80rpx;
						overflow: hidden;
						border-right: 2rpx solid #FFF;
						border-bottom: 2rpx solid #FFF;
						background: #999;
						display: flex;
						align-items: center;
						justify-content: center;
						text{
							font-size: 40rpx;
							line-height: 40rpx;
							color: #FFF;
						}
					}
				}
				.files-audio{
					margin-top: 15rpx;
				}
				.address{
					margin-top: 10rpx;
					display: flex;
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
					text{
						font-size: 28rpx;
						line-height: 28rpx;
					}
					.icon-map-filling{
						color: $HongSe;
						font-size: 35rpx;
						line-height: 35rpx;
					}
				}
			}
		}
		.more{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			line-height: 28rpx;
			color: $ZhanWeiSe;
			padding: 35rpx 0;
		}
	}
}
</style>